<template>
	<view class="simple-page">
		<!-- 顶部区域 -->
		<view class="top-area">
			<!-- 背景图 -->
			<image class="top-bg" mode="widthFix"></image>

			<!-- 遮罩层 -->
			<view class="mask-layer"></view>

			<!-- 内容区 - 调整为头像在左，用户名和登录按钮在右 -->
			<view class="top-content">
				<!-- 左侧头像 -->
				<image class="fox-icon" mode="widthFix"></image>
				
				<!-- 右侧：用户名 + 登录按钮 同列 -->
				<view class="right-content">
					<text class="welcome-text">HI~欢迎回来</text>
					<navigator url="/pages/login/login/login">
						<button class="login-btn">登录</button>
					</navigator>
				</view>
			</view>

			<!-- 统计信息 - 改为居中显示 -->
			<view class="stats-area">
				<text class="stat-item">关注3</text>
				<text class="divider">|</text>
				<text class="stat-item">话题0</text>
			</view>
		</view>

		<!-- 功能区 -->
		<view class="functions-area">
			<view class="function-item" @click="handleClick('collect')">
				<view class="icon-circle">
					<image class="function-icon" mode="widthFix"></image>
				</view>
				<text class="function-text">收藏</text>
			</view>

			<view class="function-item" @click="handleClick('history')">
				<view class="icon-circle">
					<image class="function-icon" mode="widthFix"></image>
				</view>
				<text class="function-text">历史</text>
			</view>

			<view class="function-item" @click="handleClick('settings')">
				<view class="icon-circle">
					<image class="function-icon" mode="widthFix"></image>
				</view>
				<text class="function-text">设置</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			handleClick(name) {
				uni.showToast({
					title: `点击了${name}`,
					icon: 'none'
				});
			}
		}
	};
</script>

<style>
	/* 页面基础样式 */
	.simple-page {
		width: 100%;
		background-color: #f5f5f5;
	}

	/* 顶部区域 */
	.top-area {
		position: relative;
		width: 100%;
		height: 160px;
	}

	/* 背景图 */
	.top-bg {
		width: 100%;
		height: 100%;
	}

	/* 遮罩层 - 让文字更清晰 */
	.mask-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	/* 顶部内容区 - 调整布局：头像+右侧内容（用户名+登录按钮） */
	.top-content {
		position: absolute;
		top: 30px;
		left: 20px;
		right: 20px;
		display: flex;
		align-items: flex-start; /* 顶部对齐 */
	}

	/* 狐狸图标 - 保持原有样式 */
	.fox-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: white;
		padding: 3px;
	}

	/* 右侧内容区：用户名和登录按钮同列 → 核心修改：增加align-items控制水平对齐 */
	.right-content {
		flex: 1;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		align-items: flex-start; /* 左对齐（同列），可改为center居中/ flex-end右对齐 */
	}

	/* 欢迎文字 - 保持原有样式 */
	.welcome-text {
		color: white;
		font-size: 16px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		margin-bottom: 8px; /* 与登录按钮间距 */
	}

	/* 登录按钮 - 核心修改：优化宽度和对齐，确保与文字同列 */
	.login-btn {
		background-color: #ff4d4f;
		color: white;
		border: none;
		border-radius: 15px;
		font-size: 14px;
		width: auto; /* 替代fit-content，兼容更多端 */
		white-space: nowrap; /* 防止按钮文字换行 */
	}

	/* 统计信息区 - 改为居中显示 */
	.stats-area {
		position: absolute;
		bottom: 25px;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center; /* 水平居中 */
	}

	/* 统计项 - 保持原有样式 */
	.stat-item {
		color: white;
		font-size: 14px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		flex: 1; /* 占均等宽度 */
		text-align: center; /* 自身内容居中 */
	}

	/* 分隔符 - 保持原有样式 */
	.divider {
		color: white;
		margin: 0 10px;
		opacity: 0.7;
	}

	/* 功能区 - 保持原有样式 */
	.functions-area {
		display: flex;
		justify-content: space-around;
		background-color: white;
		padding: 20px 0;
	}

	/* 功能项 - 保持原有样式 */
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 图标圆形背景 - 保持原有样式 */
	.icon-circle {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}

	/* 功能图标 - 保持原有样式 */
	.function-icon {
		width: 20px;
		height: 20px;
	}

	/* 功能文字 - 保持原有样式 */
	.function-text {
		font-size: 14px;
		color: #333;
	}
</style>